<!-- 我受不了自己写的烂代码了，等我封装好了评论组件在加这个页面 -->

<script setup lang="ts">
import { useRoute } from 'vue-router'
import img from '../../assets/img/avt-2.jpeg'
import useCommont from '../../composition/useCommont'
import dayjs from 'dayjs'

const route = useRoute()
const aid = route.params.aid
const cid = route.params.cid
const { commont, getOneCommont } = useCommont(+aid)
const onClickLeft = () => history.back()
await getOneCommont(+cid)

const { getAll, commontList, createCommont, form, deleteCommont } = useCommont(+route.params.id)

const toReply = async (commontId?: number, userId?: number) => {
   form.value.commontId = commontId
   form.value.replyUserId = userId
}
</script>

<template>
   <van-nav-bar title="评论" left-text="返回" @click="onClickLeft" left-arrow />
   <main class="p-5">
      <div class="user flex items-center">
         <img :src="commont?.user.avatar || img" alt="" class="w-10 h-10 rounded-full" />
         <div class="flex flex-col justify-between p-2">
            <div class="username font-bold text-sm">{{ commont?.user.nickname || commont?.user.username }}</div>
            <div class="date text-xs text-slate-500">{{ dayjs(commont?.createDate).fromNow() }}</div>
         </div>
      </div>
      <div class="mb-5">{{ commont?.content }}</div>

      <div v-for="item in commont?.replys" class="mb-4">
         <div class="user flex items-center justify-between">
            <div class="flex items-center">
               <img :src="item.user.avatar || img" alt="" class="w-10 h-10 rounded-full" />
               <div class="flex flex-col justify-between p-2">
                  <div class="username font-bold text-sm">{{ item.user.nickname || item.user.username }}</div>
                  <div class="date text-xs text-slate-500">{{ dayjs(item.createDate).fromNow() }}</div>
               </div>
            </div>
            <div class="flex items-center">
               <div><van-icon size="18px" name="chat-o" /></div>
               <div>
                  <van-icon size="18px" class="ml-3" name="delete-o" />
               </div>
            </div>
         </div>
         <div class="content">{{ item.content }}</div>
      </div>
   </main>
</template>

<style lang="scss" scoped></style>
